<template>
    <component :is="menuComponent" v-if="!item.hidden" :item-or-menu="itemOrMenu">
        <template v-if="item.children && item.children.length">
            <el-scrollbar style="height: 86vh"
                          v-if="(layout === 'horizontal' && item.children.length > 18) ||
					  (layout !== 'horizontal' && collapse && item.children.length > 18)"
            >

                <vab-menu v-for="route in item.children" :key="route.path" :item="route"/>
            </el-scrollbar>
            <template v-else>
                <vab-menu v-for="route in item.children" :key="route.path" :item="route"/>
            </template>
        </template>
    </component>
</template>

<script lang="ts">
import Vue from 'vue'
import {Component, Prop} from 'vue-property-decorator';
import {SettingsGetterEnum} from "@/store/enum/store.enum";
import MenuItem from './components/MenuItem.vue';
import Submenu from "./components/Submenu.vue";

@Component({components: {MenuItem, Submenu}})
export default class VabMenu extends Vue {
    // 路由信息
    @Prop({required: true,})
    private item: { alwaysShow: boolean, children: [] };
    @Prop()
    private layout: string;

    private itemOrMenu: object;
    private menuComponent: string = 'MenuItem';

    get collapse() {
        return this.$store.getters[SettingsGetterEnum.collapse]
    };

    private created() {
        this.itemOrMenu = this.item;
        const showChildren = this.handleChildren(this.item.children);
        if (showChildren.length) {
            if (showChildren.length === 1 && this.item.alwaysShow !== true) {
                this.itemOrMenu = this.item.children[0];
            } else {
                this.menuComponent = 'Submenu';
            }
        }
    };

    private handleChildren(children = []): Array<object> {
        if (!children) {
            return [];
        } else {
            return children.filter((item) => !item.hidden);
        }
    };

}
</script>
